<template>
  <div v-if="aceVisible">
    <button @click="formatCode">格式化</button>
    <editor @init="editorInit" height="400" width="500" v-model="editContent.data" lang="javascript" theme="monokai"></editor>
  </div>
</template>

<script>
import editor from "vue2-ace-editor-support-chinese";
export default {
  components: { editor },
  props: {
    aceVisible: {
      type: Boolean,
      default: false
    },
    editContent: {
      id:'',
      data:''
    }
  },
  mounted() {
    console.log(this.aceVisible);
  },
  methods: {
    editorInit() {
      require("brace/mode/javascript");
      require("brace/theme/monokai");
    },
    formatCode(){
      this.editContent.data=this.format(this.editContent.data)
    },
    format(txt, compress /*是否为压缩模式*/) {
      /* 格式化JSON源码(对象转换为JSON文本) */
      function replaceEvil(fn) {
        let Fn = Function;
        return new Fn('return ' + fn)();
      }
      let indentChar = '  ';
      let data;
      if (/^\s*$/.test(txt)) {
        this.$message.error('格式化失败、数据为空');
        return;
      }
      try {
        // data = eval('(' + txt + ')');
        data = replaceEvil(txt);
      } catch (e) {
        this.$message.error('格式化失败、语法错误');
        return;
      }
      let draw = [],
        // last = false,
        // This = this,
        line = compress ? '' : '\n';
      // nodeCount = 0,
      // maxDepth = 0;
      //let nodeCount = 0;

      function notify(name, value, isLast, indent, formObj) {
        let maxDepth = 0;
        // let nodeCount = 0;
        // nodeCount++; /*节点计数*/
        let i = 0;
        let tab = '';
        for (i, tab; i < indent; i++) tab += indentChar; /* 缩进HTML */
        tab = compress ? '' : tab; /*压缩模式忽略缩进*/
        maxDepth = ++indent; /*缩进递增并记录*/
        console.log(maxDepth);
        if (value && value.constructor === Array) {
          /*处理数组*/

          draw.push(tab + (formObj ? '"' + name + '":' : '') + '[' + line); /*缩进'[' 然后换行*/
          for (let i = 0; i < value.length; i++) notify(i, value[i], i === value.length - 1, indent, false);
          draw.push(tab + ']' + (isLast ? line : ',' + line)); /*缩进']'换行,若非尾元素则添加逗号*/
        } else if (value && typeof value === 'object') {
          /*处理对象*/

          draw.push(tab + (formObj ? '"' + name + '":' : '') + '{' + line); /*缩进'{' 然后换行*/
          let len = 0,
            i = 0;
          for (let key in value) {
            if (value.hasOwnProperty(key)) {
              len++;
            }
          }
          for (let key in value) {
            if (value.hasOwnProperty(key)) {
              notify(key, value[key], ++i === len, indent, true);
            }
          }
          draw.push(tab + '}' + (isLast ? line : ',' + line)); /*缩进'}'换行,若非尾元素则添加逗号*/
        } else {
          if (typeof value === 'string') value = '"' + value + '"';
          draw.push(tab + (formObj ? '"' + name + '":' : '') + value + (isLast ? '' : ',') + line);
        }
      }
      let isLast = true,
        indent = 0;
      notify('', data, isLast, indent, false);
      return draw.join('');
    }
  }
};
</script>

<style scoped>
</style>